@import '../../../var';
.more {
  width: 64rpx;
  height: 64rpx;
  margin: 0 30rpx 0 auto;
}
.header {
  .cover-wrap {
    position: relative;
    height: 375rpx;
    margin-bottom: 40rpx;

    .cover {
      position: relative;
      width: 100%;
      height: 100%;
      background: $primary center / cover no-repeat;

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        background-image: linear-gradient(transparent 50%, rgba(#000, 0.4) 100%);
        content: '';
      }
    }

    .info-wrap {
      position: absolute;
      bottom: -20rpx;
      display: flex;
      align-items: flex-end;
      width: 100%;
      padding: 0 $xl;

      .avatar-wrap {
        width: 140rpx;
        height: 140rpx;
        margin-right: $xl;
        padding: 5rpx;
        background-color: $bgcolor-light;
        border-radius: 10rpx;
      }

      .info {
        color: $bgcolor-light;
        text-shadow: -1px 0 1px rgba(0, 0, 0, 0.27);
        margin-bottom: 36rpx;
        max-width: 50%;

        .topicname {
          font-size: $font-size-large * 1.2;
        }
        .fans {
          .text {
            position: relative;
            display: inline-block;
          }
        }
      }
      .btnBox {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-bottom: 40rpx;
        .btn {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          width: 170rpx;
          height: 60rpx;
          color: $primary-color;
          font-size: 22rpx;
          background-color: #fff;
          border-radius: 8rpx;
        }
        .paied {
          align-items: unset;
          padding: 8rpx 0;
          .text {
            width: 100%;
            height: 20rpx;
            font-size: 18rpx;
            text-align: center;
          }
        }
        .joined {
          color: $disabled-color;
        }
      }
    }
  }
  .redDot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40rpx auto;
    .logs {
      display: flex;
      align-items: center;
      height: 54rpx;
      padding: 0rpx 15rpx;
      color: #ffffff;
      font-size: 24rpx;
      background-color: rgba($info-color, 0.9);
      border-radius: 27rpx;
      image {
        width: 35rpx;
        height: 35rpx;
        margin-right: 10rpx;
        border-radius: 50%;
      }
    }
  }
  .bio {
    padding: $md $xl;
    color: $text-color;
    font-size: 26rpx;
  }
}

.scroll-wrap {
  display: flex;
  align-items: center;
  padding-top: $xl;

  .label {
    flex: none;
    margin-right: $lg;
    padding: 2rpx $sm;
    color: #fff;
    font-size: $font-size-small;
    background-color: $primary;
    border-radius: 8rpx;
  }

  .swiper {
    flex: auto;
    width: 100%;
    height: 50rpx;

    .item {
      display: flex;
      align-items: center;
      color: $info-color;
      font-size: $font-size-small;

      .username {
        margin-right: 0.5em;
        margin-left: 0.5em;
        color: $title-color;
      }
      .highlight {
        color: $primary;
      }
    }
  }
}

.rank-wrap {
  padding: $xl;

  .rank-label {
    display: flex;
    align-items: flex-end;
    padding: $xl 0;
    color: $info-color;
    font-size: $font-size-small;

    .title {
      margin-right: 0.7em;
      color: $title-color;
      font-weight: 400;
      font-size: 28rpx;
    }

    .num {
      color: $primary;
    }
    .reward {
      width: 132rpx;
      height: 48rpx;
      margin-left: auto;
      color: #ffffff;
      font-size: 24rpx;
      line-height: 48rpx;
      text-align: center;
      background-color: $primary-color;
      border-radius: 24rpx;
    }
  }

  .users-wrap {
    display: flex;
    align-items: center;
    margin-bottom: $xl;

    .right-arrow {
      width: 30rpx;
      height: 100%;
      margin-left: auto;
      padding-left: 30rpx;
    }

    .user {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 108rpx;

      .rank {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30rpx;
        height: 30rpx;
        margin-top: 10rpx;
        color: #fff;
        font-size: 18rpx;

        > image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.feed-wrap {
  padding-bottom: 100rpx;

  .total {
    font-size: 26rpx;
    padding: $md $lg;
    color: $info-color;
    background-color: $bgcolor-gray;
  }
}

.user-wrap {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  padding: 0 $lg;
  font-size: $font-size-small;
  background-color: $bgcolor;
  border-top: 1rpx solid $border-color;

  .avatar {
    flex: none;
    margin-right: $lg;
  }

  .user-info {
    flex: auto;
    min-width: 0;

    .username {
      font-weight: bold;
    }

    .bio {
      color: $info-color;
    }
  }

  .follow-btn {
    display: flex;
    flex: none;
    align-items: center;
    height: 48rpx;
    margin-left: 24rpx;
    color: #fff;
    font-size: 20rpx;
    background-color: $primary-color;
    border-radius: 24rpx;
    transition: 0.4s;

    &.already {
      color: $bgcolor;
      background-color: lighten($primary, 40%);
    }

    .btn-icon {
      width: 1.1em;
      margin-right: $xs;
    }
  }
}
.covers {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  .confirm {
    z-index: 900;
    width: 400rpx;
    height: 542rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0rpx 0rpx 50rpx 7rpx rgba(3, 3, 3, 0.15);
    .imgBox {
      width: 258rpx;
      height: 188rpx;
      margin: 40rpx auto 24rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .payTitle {
      width: 100%;
      margin-bottom: 30rpx;
      color: $success-color;
      font-size: 33rpx;
      text-align: center;
    }
    .failure {
      color: rgba(179, 179, 179, 1);
    }
    .showBottom {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 259rpx;
      height: 56rpx;
      margin: auto;
      margin-top: 26rpx;
      color: rgba(26, 26, 26, 1);
      font-size: 26rpx;
      background: rgba(255, 255, 255, 1);
      border: 1rpx solid rgba(230, 230, 230, 1);
      border-radius: 28rpx;
    }
  }
}
.creatTopic {
  position: fixed;
  right: 60rpx;
  bottom: 60rpx;
  width: 100rpx;
  height: 100rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.operation {
  position: fixed;
  right: 65rpx;
  bottom: 240rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 90rpx;
  color: #fff;
  background-color: $primary-color;
  border-radius: 50%;
}
.share{
  align-items: center;
  justify-content: center;
  .share-tip{
    text-align: center;
    color: #999;
    font-size: 24rpx;
    }
    .share-bt{
      width: 200rpx;
      height: 56rpx;
      margin-top: 14rpx;
      background-color:  $primary-color;
      color: #fff;
      border-radius:56rpx;
      font-size: 22rpx;
    }

}
